<template>
  <div class='baiduBinding' >
    <div class="" v-if="currentType === 'tableList'">
      <div class="before-begin">
        <div class="bcp-logo">
          <img class="bcp-logo-img" src="../../../../../assets/img/baiduBCP.png" alt=""/>
        </div>
        <p v-show="$store.state.oemObj.oemFlag">{{$t('config.channel.baiduBCPTitleOem')}}</p>
        <p v-show="!$store.state.oemObj.oemFlag">{{$t('config.channel.baiduBCPTitle')}}</p>
        <p>{{$t('config.channel.baiduBCPTitle001')}}</p>
      </div>
      <div class="search">
        <div class='fl'>
          <span class="icon-text" @click.stop="add"><i class="el-icon-plus"></i>{{$t('public.add')}}</span>
          <span class="icon-text" @click.stop="refresh"><i class="iconfont icon-shuaxin"></i>{{$t('public.refresh')}}</span>
          <el-input
            :placeholder="$t('config.channel.baiduBCP002')"
            size="mini"
            class="condition"
            v-model.trim="searchName"
            @keyup.enter.native="searchNameFun">
            <i
              class="el-input__icon el-icon-search"
              slot="suffix"
              @click="searchNameFun">
            </i>
          </el-input>
          <el-button class="primary_btn" :disabled="defaultBtnDis" @click.stop="createDefaultProcess()">{{$t('config.channel.baiduBCP001')}}</el-button>
        </div>
        <pagination class="page"
                    :small="true"
                    :currentPage="currentPage"
                    :count="count || 0"
                    :totalPage="Math.ceil(count / 10)"
                    @turnPage="turnPage">
        </pagination>
      </div>
      <!-- <search :isShowInput="true"
              :isReloadIvr="false"
              :inputTitle="inputPlaceholder"
              :showAdvSearch="false"
              @add="add"
              @refresh="refresh"
              @turnPage="turnPage"
              @search="searchNameFun"
              :currentPage="currentPage"
              :count="count"
              :pageSize="pageSize"
            ></search> -->
      <el-table :data="tableData" size="mini">
        <el-table-column prop="name" label="名称">
        </el-table-column>
        <el-table-column prop="to_peer_name" label="技能组">
        </el-table-column>
        <el-table-column prop="lastUpdateTime" label="最后更新时间">
        </el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button @click="modify(scope.row)" type="text" size="small" class="update">{{$t('public.edit')}}</el-button>
            <el-button  type="text"
                        v-show="scope.row && !scope.row.type"
                        size="small">
                        <a :href="scope.row.imidUrl"
                        target="_blank">{{$t('public.test')}}</a></el-button>
            <el-button v-show="scope.row && !scope.row.type" type="text" @click="delrow(scope.row)" size="small" class="del">{{$t('public.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <baiduBinding v-if="currentType === 'baiduBinding'" :dataTodo="dataTodo" :dataObj="formData" @cancel='cancel'></baiduBinding>
  </div>
</template>
<script>
  import pagination from '@/components/public-modules/card/Pagination'
  import baiduBinding from './baiduBinding.vue'
  import { getCacheByKey, getFormatDateTime } from '@/utils/m7Utils.js'
  export default{
    name: 'baiduBCPList',
    data () {
      return {
        currentPage: 1,
        pageSize: 10,
        count: 0,
        defaultBtnDis: false,
        inputPlaceholder: this.$t('config.channel.baiduBCPSearchCon'),
        searchName: '',
        currentType: 'tableList',
        dataTodo: 'add',
        tableData: [],
        formData: {}
      }
    },
    components: {
      pagination,
      baiduBinding
    },
    methods: {
      add () {
        this.currentType = 'baiduBinding'
        this.formData = {}
        this.dataTodo = 'add'
      },
      modify (data) {
        this.currentType = 'baiduBinding'
        this.formData = data
        this.dataTodo = 'update'
      },
      delrow (data) {
        this.$confirm('确定要删除该百度BCP授权账号吗？', '删除', {
            confirmButtonText: this.$t('public.delete'),
            cancelButtonText: this.$t('public.cancel'),
            cancelButtonClass: 'primary_btn',
            confirmButtonClass: 'primary_btn',
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('removeBaiduOcpcConfig', {_id: data._id}).then((req) => {
              if (req.success) {
                this.$message.success('删除成功！')
                this.fetchData()
              }
            })
          })
      },
      cancel () {
        this.currentType = 'tableList'
        this.refresh()
      },
      refresh () {
        this.currentPage = 1
        this.searchName = ''
        this.fetchData()
      },
      turnPage (val) {
        this.currentPage = val
        this.fetchData()
      },
      searchNameFun (val) {
        this.currentPage = 1
        this.fetchData()
      },
      fetchData () {
        let data = {
          name: this.searchName,
          page: this.currentPage,
          limit: this.pageSize
        }
        this.$store.dispatch('getBaiduOcpcConfigs', data).then((resp) => {
          this.count = resp.count
          let p1 = this.$store.dispatch('getCache', {type: 'mailQueues'})
          Promise.all([p1]).then((a) => {
            resp.list && resp.list.forEach((item, index) => {
              let peer = getCacheByKey('mailQueues', 'Exten', item.to_peer)
              if (peer) {
                resp.list[index]['to_peer_name'] = peer.DisplayName
              }
              if (item.updateTime) {
                item.lastUpdateTime = getFormatDateTime(new Date(item.updateTime))
              }
            })
            if (resp.templateConfig) {
              this.defaultBtnDis = true
            } else {
              this.defaultBtnDis = false
            }
            this.tableData = resp.list
          })
        })
      },
      createDefaultProcess () {
        this.currentType = 'baiduBinding'
        this.formData = {}
        this.dataTodo = 'default'
      }
    },
    mounted () {
      this.fetchData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .baiduBinding
    height calc(100vh - 135px)
    overflow-y auto
  .before-begin
    text-align center
    margin 25px
    background #f2f6fa
    height 200px
    p
      color #595959
      font-size 12px
  .el-table .cell >.el-button--text.del
    color $c-pink
    cursor pointer
  .bcp-logo
    padding 60px 0 24px 0
    display table
    margin 0 auto
    .bcp-logo-img
      width 130px
    span
      display table-cell
      vertical-align middle
      margin-left 10px
      p
        line-height 1.8
        margin-left 14px
        text-align left
  .search
    height 30px
    padding 8px 10px
    border 1px solid #E7E7EB
    border-bottom none
    .el-icon-plus,.icon-shuaxin
      color $c-main
      font-size 12px
      margin-right 2px
    .select
      margin-right 20px
    .condition
      width 240px
      margin-right 8px
    .page
      float right
    .icon-text
      margin-right 16px
      cursor pointer
      line-height 30px
</style>